<template>
  <XenPageLayout
    title="以往工作经历"
    title-align="left"
    :show-back="true"
    navbar-bg-color="#059669"
    navbar-text-color="#ffffff"
    navbar-icon-color="#ffffff"
    :loading="loading"
    :error="hasError"
    @retry="loadDetail"
  >
    <view class="detail-page">
      <view v-if="!loading && !hasError" class="detail-container">
        <!-- 工作经历详情卡片 -->
        <view class="detail-card">
          <view class="detail-header">
            <text class="header-title">{{
              workDetail.Company || "工作单位"
            }}</text>
            <text class="header-subtitle">{{
              workDetail.Position || "职位"
            }}</text>
          </view>

          <view class="detail-content">
            <!-- 工作经历信息 -->
            <view class="info-section">
              <view class="info-grid">
                <view v-if="workDetail.Company" class="info-item">
                  <text class="info-label">工作单位</text>
                  <text class="info-value company-value">{{
                    workDetail.Company
                  }}</text>
                </view>
                <view v-if="workDetail.Position" class="info-item">
                  <text class="info-label">职位</text>
                  <text class="info-value">{{ workDetail.Position }}</text>
                </view>
                <view v-if="workDetail.StartDate" class="info-item">
                  <text class="info-label">到职日期</text>
                  <text class="info-value">{{
                    formatDate(workDetail.StartDate)
                  }}</text>
                </view>
                <view v-if="workDetail.EndDate" class="info-item">
                  <text class="info-label">离职日期</text>
                  <text class="info-value">{{
                    formatDate(workDetail.EndDate)
                  }}</text>
                </view>
                <view v-if="workDetail.Reference" class="info-item">
                  <text class="info-label">证明人</text>
                  <text class="info-value">{{ workDetail.Reference }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </XenPageLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Api from "../api/index";
import type { GetWorkResponse } from "../api/interface";
import XenPageLayout from "../../../layouts/XenPageLayout.vue";

// 响应式数据
const loading = ref(true);
const hasError = ref(false);
const workId = ref<string>("");

// 工作经历详情数据
const workDetail = ref<GetWorkResponse>({
  ID: "",
  Company: "",
  Position: "",
  StartDate: "",
  EndDate: "",
  Reference: "",
  PersonName: "",
});

// 加载详情数据
const loadDetail = async () => {
  if (!workId.value) {
    uni.showToast({
      title: "缺少工作经历ID参数",
      icon: "none",
    });
    return;
  }

  loading.value = true;
  hasError.value = false;

  try {
    console.log("正在获取工作经历详情，ID:", workId.value);

    // 调用真实的API接口
    const res = await Api().getWorkDetail(workId.value);
    console.log("工作经历详情接口返回:", res);

    if (res && res.Entity) {
      workDetail.value = res.Entity;
      console.log("获取工作经历详情成功:", workDetail.value);
    } else {
      hasError.value = true;
      console.log("工作经历详情数据异常，返回数据:", res);
      uni.showToast({
        title: "获取工作经历详情失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("获取工作经历详情异常:", error);
    hasError.value = true;
    uni.showToast({
      title: "获取工作经历详情失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return "-";
  try {
    const date = new Date(dateStr);
    return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(
      2,
      "0",
    )}.${String(date.getDate()).padStart(2, "0")}`;
  } catch {
    return dateStr.substring(0, 10).replace(/-/g, ".") || "-";
  }
};

// 页面加载
onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  // @ts-ignore
  const options = currentPage.options || {};

  if (options.id) {
    workId.value = options.id;
    loadDetail();
  } else {
    loading.value = false;
    uni.showToast({
      title: "缺少必要参数",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style lang="scss" scoped>
.detail-page {
  padding: 16px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.detail-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.detail-header {
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  padding: 20px;

  .header-title {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
  }

  .header-subtitle {
    font-size: 14px;
    opacity: 0.9;
  }
}

.detail-content {
  padding: 24px;
}

.info-section {
  margin-bottom: 0;
}

.info-grid {
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;

    &:last-child {
      border-bottom: none;
    }
  }
}

.info-label {
  color: #6b7280;
  font-weight: 500;
  min-width: 120px;
  flex-shrink: 0;
  font-size: 14px;
}

.info-value {
  color: #374151;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
  flex: 1;
  font-size: 14px;

  &.company-value {
    color: #059669;
    font-weight: 600;
  }
}
</style>
